<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/share/taglib.jsp" %>
<% String path = request.getContextPath() ;%>
<link href="<%=path%>/style/screen.css" rel="stylesheet" type="text/css" />    
<link href="<%=path%>/script/jquery17/ui.all.css" rel="stylesheet" type="text/css" />
 <link href="<%=path%>/script/jquery17/demos.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="<%=path%>/script/jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="<%=path%>/script/jquery17/jquery.bgiframe.js"></script>
 <script type="text/javascript" src="<%=path%>/script/jquery17/ui.core.js"></script>
 <script type="text/javascript" src="<%=path%>/script/jquery17/ui.dialog.js"></script>
<style type="text/css">
		body { font-size: 62.5%; }
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain {  width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }
		.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }
		
		
	</style>
	<script type="text/javascript">
	$(function() {
		$("#contactdialog").dialog({
			bgiframe: true,
			autoOpen: false,
			height: 450,
			width: 450,
			modal: true,
			buttons: {
				Cancel: function() {
					$(this).dialog('close');
				}
			}
		});
		
		$('#contactmodal').click(function() {
			$('#contactdialog').dialog('open');
		})
		
		.hover(
			function(){ 
				$(this).addClass("ui-state-hover"); 
			},
			function(){ 
				$(this).removeClass("ui-state-hover"); 
			}
		).mousedown(function(){
			$(this).addClass("ui-state-active"); 
		})
		.mouseup(function(){
				$(this).removeClass("ui-state-active");
		});
		//为获取单个值的按钮注册鼠标单击事件
		$("#contactsave").click(function(){
		var params = $("#contactform").serialize();
		$.ajax({
			url:"contact_add.action",
			type:"POST",
			data:params,
			dataType:"json",
			success:function(data){
				//清空显示层中的数据
			$("#conmessage").html("");
			if(data.message == "提交成功"){
				$("#fullname").val("");
				$("#emailaddress").val("");
				$("#phonenumber").val("");
				$("#contactcomments").val("");
			}
			//为显示层添加获取到的数据
			$("#conmessage").append("<div><font color='red'>"+data.message+"</font></div>")
			}
		});
			//$.getJSON("contact_add.action",function(data){
			//	$("#conmessage").html("<font color='red'>"+data.message+"</font>");
			//});
		});
	});
	
		
	</script>
<div id="contactdialog" title="Contact the seller">
<form id="contactform">
  <div class="contact_infomation">
		<h3>Contact Infomation</h3>
		<div id="conmessage"></div>
		<table width="681" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<th width="150">Full name</th>
				<td width="200">
				<input type="text" name="fullname" id="fullname" class="text1" maxlength="30"/>
				 </td>
				<td width="100">&nbsp;</td>
			</tr>
			<tr>
				<th>Email Address</th>
				<td>
				<input type="text" name="emailaddress" id="emailaddress" class="text1" maxlength="30" /></td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<th>Phone Number</th>
				<td><input type="text" name="phonenumber" id="phonenumber" class="text1" maxlength="30" /></td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<th>Comments</th>
				<td><textarea name="comments" id="contactcomments" class="text3" style="width:350px;" ></textarea>
				</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
			<th>&nbsp;</th>
				<td colspan="2" style="text-align:right;"><input type="button" name="submit" id="contactsave" value="提交" /></td>
			</tr>
		</table>
	</div>
</form>
</div>

<!-- Head End -->